<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-vue的点击事件.html</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>{{title}}</h1>
    <input type="button" value="获取页面的数据" @click="getValue()"> <br>
    <input type="button" value="修改页面的数据" @click="setValue"> <br>

</div>

<script>

    /**
     *   1、添加事件  @事件名称
     *            @click   点击事件
     *            @blur    失去焦点事件
     *            @change  选择事件
     *  2、函数的实现
     *        在和data 平级的 位置 书写 methods:{
     *
     *        }
     *        函数的实现直接写 函数的名称就可以
     *        函数中可以通过 this操作vue中的data的数据
     *        vue中的data的数据发生变化  页面也会进行变化
     *
     */
    new Vue({
        el:"#app",
        data:{
            title:"我购买一张双色球彩票"
        },
        methods:{  //vue中的函数在methods 里面实现
            getValue(){
                //this 对象可以直接获取 data中的数据
                console.log(this.title)
            },
            setValue(){
                this.title = "不好意思中奖了3000w"
            }
        }
    })

</script>

</body>
</html>